<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div id="div1">

    </div>
    <script src="js/src/jquery-3.2.1.min.js"></script>
    <script src="js/src/TweenMax.min.js"></script>
    <script>
        $(function () {
            //得到动画的实例
            var t = new TimelineMax();

            /* to():添加动画
                    参数说明：
                        1.元素的选择器或者对象（{}）
                        2.持续时间（单位为秒）
                        3.{}：变化的属性->值
                        4.（可选）动画延迟发生时间：可写数字，“-=0.5”，“+=0.5”
            */
            //基本实例
            /*t.to("#div1", 1, {
                left:300,
                width:300
            })*/
            //延迟实例
            t.to("#div1",1,{
                width:"300",
                ease:Elastic.easeInOut
            },1);
            t.to("#div1",1,{
                height:"300"
            },2);

        })
    </script>
</body>
</html>
